<template>
  <div :style="{ width: `${this.width}px` }">
    <a-collapse v-model:activeKey="activeTab">
      <a-collapse-panel key="base">
        <template #header>
          <div class="panel-tab__title"><info-circle-filled />常规</div>
        </template>
        <element-base-info :id-edit-disabled="idEditDisabled" :business-object="elementBusinessObject" :type="elementType" />
      </a-collapse-panel>

      <a-collapse-panel key="message" v-if="elementType === 'Process'">
        <template #header>
          <div class="panel-tab__title"><message-outlined />消息与信号</div>
        </template>
        <signal-and-massage />
      </a-collapse-panel>

      <a-collapse-panel key="condition" v-if="conditionFormVisible">
        <template #header>
          <div class="panel-tab__title"><fund-outlined />流转条件</div>
        </template>
        <flow-condition :business-object="elementBusinessObject" :type="elementType" />
      </a-collapse-panel>

      <a-collapse-panel key="form" v-if="formVisible">
        <template #header>
          <div class="panel-tab__title"><ordered-list-outlined />表单</div>
        </template>
        <element-form :id="elementId" :type="elementType" />
      </a-collapse-panel>

      <a-collapse-panel key="task" v-if="elementType.indexOf('Task') !== -1 || elementType === 'subProcess'">
        <template #header>
          <div class="panel-tab__title"><check-circle-outlined />任务</div>
        </template>
        <element-task :id="elementId" :type="elementType" />
      </a-collapse-panel>

      <a-collapse-panel key="multiInstance" v-if="elementType.indexOf('Task') !== -1">
        <template #header>
          <div class="panel-tab__title"><question-circle-outlined />多实例</div>
        </template>
        <element-multi-instance :business-object="elementBusinessObject" :type="elementType" />
      </a-collapse-panel>

      <a-collapse-panel key="listeners">
        <template #header>
          <div class="panel-tab__title"><bell-outlined />执行监听器</div>
        </template>
        <element-listeners :id="elementId" :type="elementType" />
      </a-collapse-panel>

      <a-collapse-panel key="taskListeners" v-if="elementType === 'UserTask'">
        <template #header>
          <div class="panel-tab__title"><bell-outlined />任务监听器</div>
        </template>
        <user-task-listeners :id="elementId" :type="elementType" />
      </a-collapse-panel>

      <a-collapse-panel key="extensions">
        <template #header>
          <div class="panel-tab__title"><plus-circle-outlined />扩展属性</div>
        </template>
        <element-properties :id="elementId" :type="elementType" />
      </a-collapse-panel>

      <a-collapse-panel key="other">
        <template #header>
          <div class="panel-tab__title"><fund-outlined />其他</div>
        </template>
        <element-other-config :id="elementId" />
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>

<script>
  import {
    InfoCircleFilled,
    MessageOutlined,
    FundOutlined,
    OrderedListOutlined,
    CheckCircleOutlined,
    QuestionCircleOutlined,
    BellOutlined,
    PlusCircleOutlined,
  } from '@ant-design/icons-vue';

  import ElementBaseInfo from './base/ElementBaseInfo.vue';
  import ElementOtherConfig from './other/ElementOtherConfig.vue';
  import ElementTask from './task/ElementTask.vue';
  import ElementMultiInstance from './multi-instance/ElementMultiInstance.vue';
  import FlowCondition from './flow-condition/FlowCondition.vue';
  import SignalAndMassage from './signal-message/SignalAndMessage.vue';
  import ElementListeners from './listeners/ElementListeners.vue';
  import ElementProperties from './properties/ElementProperties.vue';
  import ElementForm from './form/ElementForm.vue';
  import UserTaskListeners from './listeners/UserTaskListeners.vue';
  import Log from '../Log';
  import { log } from 'bpmn-js-token-simulation';

  /**
   * 侧边栏
   * @Author MiyueFE
   * @Home https://github.com/miyuesc
   * @Date 2021年3月31日18:57:51
   */
  export default {
    name: 'MyPropertiesPanel',
    components: {
      InfoCircleFilled,
      MessageOutlined,
      FundOutlined,
      OrderedListOutlined,
      CheckCircleOutlined,
      QuestionCircleOutlined,
      BellOutlined,
      PlusCircleOutlined,
      UserTaskListeners,
      ElementForm,
      ElementProperties,
      ElementListeners,
      SignalAndMassage,
      FlowCondition,
      ElementMultiInstance,
      ElementTask,
      ElementOtherConfig,
      ElementBaseInfo,
    },
    componentName: 'MyPropertiesPanel',
    props: {
      bpmnModeler: {
        type: Object,
        required: true,
      },
      prefix: {
        type: String,
        default: 'camunda',
      },
      width: {
        type: Number,
        default: 480,
      },
      idEditDisabled: {
        type: Boolean,
        default: false,
      },
    },
    provide() {
      return {
        prefix: this.prefix,
        width: this.width,
      };
    },
    data() {
      return {
        activeTab: 'base',
        elementId: '',
        elementType: '',
        elementBusinessObject: {}, // 元素 businessObject 镜像，提供给需要做判断的组件使用
        conditionFormVisible: false, // 流转条件设置
        formVisible: true, // 表单配置
        timer: null,
      };
    },
    watch: {
      elementId: {
        handler() {
          this.activeTab = 'base';
        },
      },
    },
    created() {
      this.initModels();
    },
    methods: {
      initModels() {
        // 初始化 modeler 以及其他 moddle
        console.log('initModels', this.bpmnModeler);
        if (!this.bpmnModeler) {
          // 避免加载时 流程图 并未加载完成
          this.timer = setTimeout(() => this.initModels(), 10);
          return;
        }
        console.log(22);
        if (this.timer) clearTimeout(this.timer);
        console.log(11);
        console.log('modeling', this.bpmnModeler.get('modeling'));
        console.log('moddle', this.bpmnModeler.get('moddle'));
        console.log('eventBus', this.bpmnModeler.get('eventBus'));
        console.log('bpmnFactory', this.bpmnModeler.get('bpmnFactory'));
        console.log('elementFactory', this.bpmnModeler.get('elementFactory'));
        console.log('elementRegistry', this.bpmnModeler.get('elementRegistry'));
        console.log('replace', this.bpmnModeler.get('replace'));
        console.log('selection', this.bpmnModeler.get('selection'));
        window.bpmnInstances = {
          modeler: this.bpmnModeler,
          modeling: this.bpmnModeler.get('modeling'),
          moddle: this.bpmnModeler.get('moddle'),
          eventBus: this.bpmnModeler.get('eventBus'),
          bpmnFactory: this.bpmnModeler.get('bpmnFactory'),
          elementFactory: this.bpmnModeler.get('elementFactory'),
          elementRegistry: this.bpmnModeler.get('elementRegistry'),
          replace: this.bpmnModeler.get('replace'),
          selection: this.bpmnModeler.get('selection'),
        };
        console.log(33);
        this.getActiveElement();
      },
      getActiveElement() {
        // 初始第一个选中元素 bpmn:Process
        this.initFormOnChanged(null);
        this.bpmnModeler.on('import.done', (e) => {
          this.initFormOnChanged(null);
        });
        // 监听选择事件，修改当前激活的元素以及表单
        this.bpmnModeler.on('selection.changed', ({ newSelection }) => {
          this.initFormOnChanged(newSelection[0] || null);
        });
        this.bpmnModeler.on('element.changed', ({ element }) => {
          // 保证 修改 "默认流转路径" 类似需要修改多个元素的事件发生的时候，更新表单的元素与原选中元素不一致。
          if (element && element.id === this.elementId) {
            this.initFormOnChanged(element);
          }
        });
      },
      // 初始化数据
      initFormOnChanged(element) {
        let activatedElement = element;
        if (!activatedElement) {
          activatedElement =
            window.bpmnInstances.elementRegistry.find((el) => el.type === 'bpmn:Process') ??
            window.bpmnInstances.elementRegistry.find((el) => el.type === 'bpmn:Collaboration');
        }
        if (!activatedElement) return;
        Log.printBack(`select element changed: id: ${activatedElement.id} , type: ${activatedElement.businessObject.$type}`);
        Log.prettyInfo('businessObject', activatedElement.businessObject);
        window.bpmnInstances.bpmnElement = activatedElement;
        this.bpmnElement = activatedElement;
        this.elementId = activatedElement.id;
        this.elementType = activatedElement.type.split(':')[1] || '';
        this.elementBusinessObject = JSON.parse(JSON.stringify(activatedElement.businessObject));
        this.conditionFormVisible = !!(
          this.elementType === 'SequenceFlow' &&
          activatedElement.source &&
          activatedElement.source.type.indexOf('StartEvent') === -1
        );
        this.formVisible = this.elementType === 'UserTask' || this.elementType === 'StartEvent';
      },
      beforeUnmount() {
        window.bpmnInstances = null;
      },
    },
  };
</script>

<style scoped>
  ::v-deep(.ant-collapse-content-box) {
    padding: 0 !important;
  }
  .process-panel__container {
    border-left: 1px solid #e9e9e9;
  }

  .panel-tab__title {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .ant-collapse-header {
    padding: 12px 16px !important;
  }
</style>
